ReactNative Viewをオーバーレイで表示する
概要
あるViewの上に別のViewを重ねたい時がある。
こういうのを「オーバーレイ」と言うらしい。
ReactNativeでは、cssを用いて実現する。
結論
position: 'absolute'とzIndex: テキトーな数字を用いれば、オーバーレイできる。
code: sample.js
import {StyleSheet, View} from 'react-native';
const Sample = () => {
return (
<>
<View style={{styles.overlay}}></View>
<View></View>
</>
)
}
const styles = StyleSheet.create({
overlay: {
position: 'absolute',
zIndex: 100,
top: 0,
right: 0,
width: '100%',
}
})
top, rightで位置の調整は行う。（bottom, leftでもOK）
参考：